<template>
  <ScalablePage>
    <div class="left">
      <!-- 巡检管理-左侧 -->
      <!-- <img src="../assets/xj/a1.png" style="width: 100%" /> -->
      <div class="screen-title-container-l1">
        <img src="../assets/xj/a1.png" style="width: 100%" />
        <div class="screen-title-text-l1">更多</div>
      </div>
      <div class="xj-qingkuang">
        <div class="y-color">
          已完成({{ ywc[0]?.value }})
          <p>{{ ywc[0]?.name }}</p>
        </div>
        <div class="y-color">
          已完成({{ ywc[1]?.value }})
          <p>{{ ywc[1]?.name }}</p>
        </div>
        <div class="w-color">
          未完成({{ wancheng[0]?.value }})
          <p>{{ wancheng[0]?.name }}</p>
        </div>
        <div class="w-color">
          未完成({{ wancheng[1]?.value }})
          <p>{{ wancheng[1]?.name }}</p>
        </div>
      </div>
      <img src="../assets/xj/t1.png" />
      <div class="xj-list">
        <span class="xj-icon">01</span>
        <div class="xj-txt xj-border1" ref="myDiv">
          <span class="xj-xunjian">{{ xunjian.rwlist[0]?.name }}</span><span class="xj-status">{{
            xunjian.rwlist[0]?.rate }}% ({{ xunjian.rwlist[0]?.wc }}/{{
              xunjian.rwlist[0]?.value
            }})</span>
        </div>
      </div>

      <div class="xj-list">
        <span class="xj-icon">02</span>
        <div class="xj-txt xj-border2">
          <span class="xj-xunjian">{{ xunjian.rwlist[1]?.name }}</span><span class="xj-per">{{ xunjian.rwlist[1]?.rate
          }}% ({{ xunjian.rwlist[1]?.wc }}/{{
              xunjian.rwlist[1]?.value
            }})</span>
        </div>
      </div>

      <div class="xj-list">
        <span class="xj-icon">03</span>
        <div class="xj-txt xj-border3">
          <span class="xj-xunjian">{{ xunjian.rwlist[2]?.name }}</span><span class="xj-per">{{ xunjian.rwlist[2]?.rate
          }}% ({{ xunjian.rwlist[2]?.wc }}/{{
              xunjian.rwlist[2]?.value
            }})</span>
        </div>
      </div>
      <div class="xj-list">
        <span class="xj-icon">04</span>
        <div class="xj-txt xj-border4">
          <span class="xj-xunjian">{{ xunjian.rwlist[3]?.name }}</span><span class="xj-per">{{ xunjian.rwlist[3]?.rate
          }}% ({{ xunjian.rwlist[3]?.wc }}/{{
              xunjian.rwlist[3]?.value
            }})</span>
        </div>
      </div>
      <div class="xj-list">
        <span class="xj-icon">05</span>
        <div class="xj-txt xj-border5">
          <span class="xj-xunjian">{{ xunjian.rwlist[4]?.name }}</span><span class="xj-per">{{ xunjian.rwlist[4]?.rate
          }}% ({{ xunjian.rwlist[4]?.wc }}/{{
              xunjian.rwlist[4]?.value
            }})</span>
        </div>
      </div>
      <div class="xj-list">
        <span class="xj-icon">06</span>
        <div class="xj-txt xj-border6">
          <span class="xj-xunjian">{{ xunjian.rwlist[5]?.name }}</span><span class="xj-per">{{ xunjian.rwlist[5]?.rate
          }}% ({{ xunjian.rwlist[5]?.wc }}/{{
              xunjian.rwlist[5]?.value
            }})</span>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue";
import { onMounted, ref, toRefs, reactive } from "vue";
import { taskNumAPI, taskNumCompleteAPI, taskNumUnCompleteAPI, taskNumDayCompleteAPI, taskNumRateAPI } from "@/utils/shuiwu/api";


let url = "http://192.168.254.34:8090/info/getIndexVal";

const myDiv = ref(null);

const width1 = ref(0);
const width2 = ref(0);
const width3 = ref(0);
const width4 = ref(0);
const width5 = ref(0);
const width6 = ref(0);
let width = 344;
interface wanchengType {
  name: string;
  value: number;
}

const state = reactive({
  xunjian: {
    rwlist: [],
  },
  wancheng: [] as wanchengType[],
  ywc: [],
  //   border6:{
  //     width:width6+'px',
  //     border:`1px solid red`
  //   }
});

onMounted(() => {
  // width6.value=344;
  //   if (myDiv.value) {
  //   const width = myDiv.value.offsetWidth;
  // }

  getXJW();
  getXJWeiWancheng();
  getXJYiWancheng();
});
let { xunjian, wancheng, ywc } = toRefs(state);

// 线下巡检每月任务数
function getXJW() {
  taskNumAPI().then((res) => {
    let arr = res.data;
    for (let i = 0; i < arr.length; i++) {
      let str = arr[i].key.split("-")[0];
      state.xunjian.rwlist.push({ name: str, value: parseInt(arr[i].value) });
    }
    getXJWancheng();
  });
}

// 线下巡检每月已完成数
function getXJWancheng() {
  taskNumCompleteAPI().then((res) => {
    let arr = res.data;
    for (let i = 0; i < arr.length; i++) {
      state.xunjian.rwlist[i].wc = parseInt(arr[i].value);
      /**
       * 计算完成率，下面计算也可以，请求 taskNumRateAPI 接口也可以
       */
      let rate = arr[i].value / state.xunjian.rwlist[i].value;
      state.xunjian.rwlist[i].rate = (rate * 100).toFixed(2);
      if (i === 0) {
        width1.value = rate * width;
      }
      if (i === 1) {
        width2.value = rate * width;
      }
      if (i === 2) {
        width3.value = rate * width;
      }
      if (i === 3) {
        width4.value = rate * width;
      }
      if (i === 4) {
        width5.value = rate * width;
      }
      if (i === 5) {
        width6.value = rate * width;
      }
    }
  })
}


// 线下巡检完成率
function getXJWanchenglv() {
  taskNumRateAPI().then((res) => {
    console.log(res.data);
  });
}

// 线下巡检未完成数
function getXJWeiWancheng() {
  taskNumUnCompleteAPI().then((res) => {
    let arr = res.data;
    // let arr1=[],arr2=[]
    state.wancheng.push({
      name: arr.slice(-1)[0].key.split("-")[0],
      value: parseInt(arr.slice(-1)[0].value),
    });
    state.wancheng.push({
      name: arr.slice(-2)[0].key.split("-")[0],
      value: parseInt(arr.slice(-2)[0].value),
    });
  })
}

// 线下巡检每日已完成数
function getXJYiWancheng() {
  taskNumDayCompleteAPI().then((res) => {
    let arr = res.data;
    // let arr1=[],arr2=[]
    state.ywc.push({
      name: arr.slice(-1)[0].key.split("-")[0],
      value: parseInt(arr.slice(-1)[0].value),
    });
    state.ywc.push({
      name: arr.slice(-2)[0].key.split("-")[0],
      value: parseInt(arr.slice(-2)[0].value),
    });
  })
}
</script>

<style scoped>
.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.xj-qingkuang {
  background: url(../assets/xj/xjbg.png) no-repeat;
  background-size: contain;
  height: 146px;
  display: grid;
  grid-template-columns: repeat(2, 175px);
  grid-template-rows: 60px 60px;
  gap: 10px 133px;
  margin-top: 55px;
  margin-bottom: 37px;
}

.xj-qingkuang div {
  padding-left: 19px;
  padding-top: 13px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #00fff6;
  line-height: 27px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.xj-qingkuang div>p {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #d0e6ff;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.y-color {
  color: #00fff6;
}

.w-color {
  color: #fad427;
}

.xj-list {
  height: 75px;
  background: rgba(0, 23, 40, 0.8);
  border: 2px solid #2e5472;
  line-height: 75px;
  padding-left: 23px;
  border-radius: 5px;
  display: flex;
  margin-top: 25px;
}

.xj-icon {
  width: 36px;
  height: 36px;
  background: #013a66;
  display: inline-block;
  font-family: Helvetica;
  font-size: 22px;
  color: #cfeaff;
  line-height: 36px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 16px;
}

.xj-txt {
  margin-left: 7px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-right: 25px;
  margin-top: 14px;
  height: 42px;
  position: relative;
  border-bottom: 4px solid #032139;
}

.xj-txt::before {
  position: absolute;
  left: 0;
  bottom: -4px;
  right: 0;
  content: "";
  height: 4px;
}

.xj-border1::before {
  width: v-bind(width1 + "px");
  height: 4px;
  background: linear-gradient(270deg, #00a4fb 0%, #0e304a 100%);
}

.xj-border2::before {
  /* width: 265px; */
  width: v-bind(width2 + "px");
  height: 4px;
  background: linear-gradient(270deg, #fbc502 0%, #5b4a07 100%);
}

.xj-border3::before {
  /* width: 239px; */
  width: v-bind(width3 + "px");
  height: 4px;
  background: linear-gradient(270deg, #00d976 0%, #01361e 100%);
}

.xj-border4::before {
  /* width: 202px; */
  width: v-bind(width4 + "px");
  height: 4px;
  background: linear-gradient(270deg, #e63535 0%, #510505 100%);
}

.xj-border5::before {
  /* width: 202px; */
  width: v-bind(width5 + "px");
  height: 4px;
  background: linear-gradient(270deg, #00fff6 0%, #004f4c 100%);
}

.xj-border6::before {
  width: v-bind(width6 + "px");
  height: 4px;
  background: linear-gradient(270deg, #00fff6 0%, #004f4c 100%);
}

.xj-xunjian {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #cfeaff;
  line-height: 35px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.xj-status {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 26px;
  color: #00fff6;
  line-height: 33px;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.xj-per {
  font-family: D-DIN, D-DIN;
  font-weight: bold;
  font-size: 26px;
  color: #ffffff;
  line-height: 36px;
  text-align: right;
  font-style: normal;
  text-transform: none;
}
</style>
